<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--
        bootstrap
        elementUI
        layui
        easyUI
    -->
    <meta charset="UTF-8">
    <title>遍历元素</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
    <div id="d5" class="a">
    </div>
    <div id="d2">
        <p id="p">
            这是一个<span id="a">段落</span>
        </p>
    </div>
    <div id="d3" class="a">
    </div>
    <div id="d6">
    </div>
    <div id="d4" class="a">
    </div>
    <p id="p2">

    </p>

</body>
<script>
    $(function(){
        //获取 上级标签
        // console.log($("#a").parent());
        //获取所有的上级标签
        // console.log($("#a").parents());
        //获取所有的 上级 div标签
        // console.log($("#a").parents("div"));
        //获取 当前标签 和 指定标签之间的上级标签
        // console.log($("#a").parentsUntil("body"));

        //获取 直接子标签
        // console.log($("#d1").children());
        //获取  直接子标签（p 标签 ,id = p）
        // console.log($("#d2").children("p#p"));
        //获取 子标签
        // console.log($("#d1").find("p"));
        //获取所有的子标签（包含 子孙标签）
        // console.log($("#d1").find("*"));
        //获取同胞元素
        // console.log($("#d2").siblings());
        //获取同胞div标签
        // console.log($("#d2").siblings("div"));
        //获取下一个标签
        // console.log($("#d2").next());
        //获取 下面所有的同级标签
        // console.log($("#d2").nextAll());
        //获取 下面所有的div标签
        // console.log($("#d2").nextAll("div"));

        //获取  d2和d3之间所有的同胞
        // console.log($("#d2").nextUntil("#d4"));

        //获取上一个标签
        // console.log($("#d2").prev());
        //获取第一个p标签
        // console.log($("p").first());
        //获取最后一个p标签
        // console.log($("p").last());
        //获取 索引为 2 的div标签
        // console.log($("div").eq(2));
        //获取 class=a 的div标签
        // console.log($("div").filter(".a"));
        //获取 class !=a 的div标签
        console.log($("div").not(".a"));
    });

</script>
</html>